<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="/world/script/json2.js"></script>
<script type="text/javascript" src="/world/script/jquery.js"></script>
<script type="text/javascript">
//ID 중복체크
$(document).ready(function(){ //페이지가 로딩될때
	$("#memberId").on("keyup",function(){
		$.ajax({
			type:"post",
			url:"${initParam.rootPath}/member/idCheck.do",
			data:{"idCheck":$("#memberId").val()},
			dataType:"json",
			beforeSend:function(){

				if($("#memberId").val().length<6){
				
					$("#msg").html("<font color='red'>ID는 6자리 이상 입력하세요.</font>");
					
					return false;//전송 x
					
				}else{
					$("#msg").html("");
				}
			},
			success:function(result){//result = map에 있는 값 , 넘어온 값
				
				$("#msg").html("<font color='green'>"+result.message+"</font>");
				
				
			}
		});//ajax
	});//on

	
//닉네임 중복 체크
$("#nickName").on("keyup",function(){
		$.ajax({
		type:"post",
		url:"${initParam.rootPath}/member/nickNameCheck.do",
		data:{"nickNameCheck":$("#nickName").val()},
		dataType:"json",
		beforeSend:function(){
			//var nickNameCheck = $("#nickName").val();
			if($("#nickName").val().length < 4){
				$("#msgNick").html("<font color='red'>닉네임은 4자리 이상 입력하세요.</font>");
				return false; //전송 x
			}else{
				$("#msgNick").html("");
			}
		},//before
		success:function(result){
			$("#msgNick").html("<font color='green'>"+result.message+"</font>");
		}

	});
});//on
});//ready


</script>
</head>
<body>
<h1 align="center"><font size="120">회원 가입 양식</font></h1>
<form action="/Goalbeer/admin/join.do" method="post">
	<br><br><br>
	<table align="center">
	<tr>
		 <td>ID :</td>
		 <td><input type="text" id="memberId" name="memberId" maxlength="8"/><span id='msg'></span></td>
	</tr>
	<tr>
		<td>PW :</td> 
		<td><input type="password" id="memberPassword" name="memberPassword" maxlength="8"/></td>
		<td id="check_pw"></td>
	</tr>
	<tr>
		<td>이름 :</td> 
		<td><input type="text" id="memberName" name="memberName"maxlength="5"/></td>
	</tr>
	<tr>
		<td>닉네임 :</td> 
		<td><input type="text" id="nickName" name="nickName" maxlength="6"/><span id="msgNick"></span></td>
	</tr>
	<tr>
		<td>성별 :</td> 
		<td>남<input type="radio" name="gender" value="m"/>
			    여<input type="radio" name="gender" value="f"/></td>
	</tr>
	<tr>	
		<td>전화번호 :</td>
		<td><input type="text" name="phoneNumber" maxlength="11"/></td>
	</tr>
	<tr>		
		<td>생년월일 :</td>
		<td><select id="birthYear" name="birthYear"><option value="birthYear">연도 선택</option><%for(int i=1950; i<=2010; i++){ %><option value="<%=i%>"><%=i+"년"%></option><%} %></select>
		 <select id="birthMonth" name="birthMonth"><option value="birthMonth">월 선택</option> <%for(int i=1; i<=12; i++){ %><option value="<%=i%>"><%=i+"월"%></option><%} %></select>
		 <select id="birthDay" name="birthDay"><option value="birthDay">일 선택</option><%for(int i=1; i<=31; i++){ %><option value="<%=i%>"><%=i+"일"%></option><%} %></select></td>
	</tr>
	<tr>	 	
		<td>Email :</td>
		<td><input type="text" id="email" name="email" maxlength="15"/></td>
	</tr>
	<tr>
		<td><input type="hidden" id="memberGrade" name="memberGrade" value="lev1"/></td>
	</tr>
	<tr>
		<td>
		<input type="hidden" id="memberLeave" name="memberLeave" value="mlt"/>
		</td>
	</tr>
	<tr>
	<td><input type="submit" value="회원가입"/>
	       <input type="reset" value="다시 작성"/></td>
	</tr>
<!-- ID : <input type="text" id="id" name="id"/><br> -->
	<!-- @ModelAttribute 사용시 
				Domain Object의 프러퍼티 이름과 요청파라미터의 이름을 매칭
					ex) ID : <input type="text" id="memberId" 

name="memberId"/>;
			
			private String memberId;
	priivate String memberPassword;
	private String memberName;
	private String nickName;
	private String gender;
	private int birthYear;
	private int birthMonth;
	private int birthDay;
	private String email;
	private String memberGrade;
	private String memberLeave;
	
	
	-->
</table>
</form>

</body>
</html>